<template>
  <div id="khxx-lxr-list">
    <div>
      <el-select
        style="width: 40vw"
        v-model="selectValue"
        placeholder="请选择客户"
        @change="onSelectChange"
        :disabled="selectDisable"
      >
        <el-option
          v-for="item in selectOptions"
          :key="item.customerId"
          :label="item.customerName"
          :value="item.customerId"
        >
        </el-option>
      </el-select>
      <span style="padding-left: 10px">
        <el-button
          type="primary"
          :disabled="selectDisable || !selectTid"
          @click="clickAddLXR"
          >添加联系人</el-button
        >
      </span>
    </div>
    <br />
    <el-table
      v-loading="loading"
      :data="tableData"
      border
      style="width: 100%"
      highlight-current-row
      height="60vh"
    >
      <el-table-column
        :resizable="false"
        prop="contName"
        label="联系人名称"
        width="100"
        fixed
      >
      </el-table-column>

      <el-table-column :resizable="false" prop="contId" label="编号" width="50">
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="contSex"
        label="性别"
        width="50"
      >
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="contPosition"
        label="职位"
        width="200"
      >
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="contOfficeTelephone"
        label="办公电话"
        width="120"
      >
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="contTelephone"
        label="手机号"
        width="120"
      >
      </el-table-column>
      <el-table-column
        :resizable="false"
        prop="contRemarks"
        label="备注"
        width="330"
      >
      </el-table-column>

      <el-table-column :resizable="false" prop="contCustomerId" v-if="false">
      </el-table-column>

      <el-table-column
        :resizable="false"
        fixed="right"
        label="操作"
        width="160"
      >
        <template slot-scope="scope">
          <!-- v-if="scope.row.oppStateId == 1001" -->
          <el-button
            size="mini"
            type="success"
            :disabled="
              scope.row.dpExecutionResults != '' &&
              scope.row.dpExecutionResults != null
            "
            @click="handleEdit(scope.$index, scope.row)"
            >修改</el-button
          >
          <el-button
            slot="reference"
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :title="changeOrAdd ? '修改联系人' : '添加联系人'"
      :visible.sync="dialogFormVisible"
    >
      <el-form
        label-position="right"
        label-width="110px"
        ref="formLabelAlign"
        :model="formLabelAlign"
        :rules="rules"
        ><!-- :inline="true":自动多行处理 -->
        <el-form-item prop="contId" v-if="false">
          <el-input disabled v-model="formLabelAlign.contId"></el-input>
        </el-form-item>
        <el-form-item label="联系人名称" prop="contName">
          <el-input
            placeholder="请输入联系人名称"
            v-model="formLabelAlign.contName"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="contSex">
          <el-input
            placeholder="请输入性别"
            v-model="formLabelAlign.contSex"
          ></el-input>
        </el-form-item>
        <el-form-item label="职位" prop="contPosition">
          <el-input
            placeholder="请输入职位"
            v-model="formLabelAlign.contPosition"
          ></el-input>
        </el-form-item>
        <el-form-item label="办公电话" prop="contOfficeTelephone">
          <el-input
            placeholder="请输入办公电话"
            v-model.number="formLabelAlign.contOfficeTelephone"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="contTelephone">
          <el-input
            placeholder="请输入手机号"
            v-model.number="formLabelAlign.contTelephone"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="contRemarks">
          <el-input
            placeholder="请输入备注"
            type="textarea"
            v-model="formLabelAlign.contRemarks"
          ></el-input>
        </el-form-item>

        <div style="padding-top: 10px"></div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('formLabelAlign')">
          确 认
        </el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data() {
    let checkNum1 = (rule, value, callback) => {
      let err = new Error("请输入正确的电话号码!");
      if (!value) {
        return callback(err);
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(err);
        } else {
          if ((value + "").length != 11) {
            callback(err);
          } else {
            callback();
          }
        }
      }, 20);
    };
    return {
      changeOrAdd: false,
      selectValue: null,
      selectOptions: null,
      selectTid: false,
      loading: false,
      selectDisable: true,
      tableData: null,
      dialogFormVisible: false,
      formLabelAlign: {
        contId: null,
        contName: null, //联系人名称
        contSex: null, //性别
        contPosition: null, //职位
        contOfficeTelephone: "", //办公电话
        contTelephone: "", //手机号
        contRemarks: "", //备注
        contCustomerId: this.selectValue, //客户编号
      },
      rules: {
        contName: [{ required: true, message: "请输入联系人名称!" }],
        contSex: [
          { required: true, message: "请输入性别!" },
          { min: 1, max: 2, message: "只能输入1或2个汉字!" },
        ],
        contOfficeTelephone: [
          { required: true, message: "请输入办公电话!" },
          { type: "number", message: "电话号码必须为数字值" },
          { validator: checkNum1 },
        ],
        contTelephone: [
          { required: true, message: "请输入手机号!" },
          { type: "number", message: "电话号码必须为数字值" },
          { validator: checkNum1 },
        ],
      },
    };
  },
  created: function () {
    this.$axios({
      method: "post",
      crossdomain: true,
      url: "/customer/list",
    }).then((response) => {
      //   console.log(response.data.data[0]); //请求成功返回的数据
      this.selectOptions = response.data.data[0];
      //   console.log(this.tableData);
      this.selectDisable = false;
    });
  },
  methods: {
    onSelectChange(opt) {
      // console.log("select", opt);
      this.loading = true;
      this.selectDisable = true;
      this.$axios({
        method: "post",
        crossdomain: true,
        url: "/contact/list/" + opt,
      }).then((response) => {
        //   console.log(response.data.data); //请求成功返回的数据 列表信息
        this.tableData = response.data.data[0];
        // console.log(this.tableData);
        this.loading = false;
        this.selectDisable = false;
        this.selectTid = true;
      });
    },
    handleDelete(index, row) {
      this.$confirm(
        `此操作将永久删除条目<${row.contName}>, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(() => {
        this.$axios({
          method: "delete",
          crossdomain: true,
          url: "/contact/del/" + row.contId,
        }).then((response) => {
          // console.log(response); //请求成功返回的数据
          if (response.data.type == "OK") {
            this.tableData.splice(index, 1);
            this.$notify({
              title: "删除成功啦",
              type: "success",
              duration: "1000", // 1000ms后关闭
              showClose: false,
            });
            // this.$router.replace({ path: "/" });
          } else {
            this.$notify({
              title: "删除失败惹",
              type: "error",
              message: response.data.msg,
              duration: "4000", // 1000ms后关闭
              showClose: false,
            });
          }
        });
      });

      // console.log("delete", index, row);
    },
    clickAddLXR() {
      // console.log("click add lxr",this.selectValue);// 选择的客户id
      this.changeOrAdd = false;
      this.formLabelAlign = {
        contId: null,
        contName: null, //联系人名称
        contSex: null, //性别
        contPosition: null, //职位
        contOfficeTelephone: "", //办公电话
        contTelephone: "", //手机号
        contRemarks: "", //备注
        contCustomerId: this.selectValue, //客户编号
      };
      this.dialogFormVisible = true;
    },
    handleEdit(index, row) {
      this.changeOrAdd = true;
      this.formLabelAlign = JSON.parse(JSON.stringify(row));
      //   this.formLabelAlign.row = row; // 添加原型数据方便修改
      // console.log(this.formLabelAlign); //查看转换后
      this.formLabelAlign.contCustomerId = this.selectValue;
      this.dialogFormVisible = true;
      // console.log("edit", index, row);
    },
    submitForm(formName) {
      //   console.log(this.formLabelAlign);
      this.$refs[formName].validate((valid) => {
        // console.log("submit:",this.formLabelAlign);
        if (valid) {
          this.formLabelAlign.contCustomerId = this.selectValue;
          this.formLabelAlign.customer = undefined;
          //   console.log(this.changeOrAdd, this.formLabelAlign);
          this.$axios({
            method: this.changeOrAdd ? "put" : "post",
            crossdomain: true,
            url:
              "/contact/" +
              (this.changeOrAdd
                ? "update?" + this.$qs.stringify(this.formLabelAlign)
                : "add"),
            data: this.$qs.stringify(this.formLabelAlign),
          }).then((response) => {
            // console.log(response); //请求成功返回的数据
            if (response.data.type == "OK") {
              // this.formLabelAlign.row = Object.assign({}, this.formLabelAlign.row, params);
              // console.log(this.formLabelAlign.row);
              this.$notify({
                title: "成功啦",
                type: "success",
                duration: "1000", // 1000ms后关闭
                showClose: false,
              });
              // this.$router.replace({ path: "/" });
              this.dialogFormVisible = false;
              this.onSelectChange(this.selectValue); //刷新列表
            } else {
              this.$notify({
                title: "失败惹",
                message: response.data.msg,
                type: "error",
                duration: "4000", // 1000ms后关闭
                showClose: false,
              });
            }
          });
        } else {
          this.$notify({
            title: "错了哦",
            message: "还有选项没有填对呢",
            type: "error",
            duration: "4000", // 1000ms后关闭
            showClose: false,
          });
          return false;
        }
      });
    },
  },
};
</script>
